import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, MeshBasicMaterial,
  BufferGeometry, Vector3, Line, LineBasicMaterial,
  WebGLRenderer, FontLoader, TextGeometry, Mesh
} from 'three';

const drawAxes = scene => {
  const xGeo = new BufferGeometry();
  const xGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(1, 0, 0)
  ];
  xGeo.setFromPoints(xGeoPoints);
  const xMat = new LineBasicMaterial({
    color: 0xff0000
  });
  const xAxis = new Line(xGeo, xMat);
  scene.add(xAxis);

  const yGeo = new BufferGeometry();
  const yGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(0, 1, 0)
  ];
  yGeo.setFromPoints(yGeoPoints);
  const yMat = new LineBasicMaterial({
    color: 0x00ff00
  });
  const yAxis = new Line(yGeo, yMat);
  scene.add(yAxis);

  const zGeo = new BufferGeometry();
  const zGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(0, 0, 1)
  ];
  zGeo.setFromPoints(zGeoPoints);
  const zMat = new LineBasicMaterial({
    color: 0x00ccff
  });
  const zAxis = new Line(zGeo, zMat);
  scene.add(zAxis);
};

class Index extends PureComponent {

  componentDidMount() {
    const scene = new Scene();

    const camera = new OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
    camera.position.set(5, 5, 20);
    camera.lookAt(1, 0, 0);

    const material = new MeshBasicMaterial({
      color: 0xffff00,
      wireframe: true
    });

    drawAxes(scene);

    const canvas = document.getElementById('mainCanvas');
    const renderer = new WebGLRenderer({
      canvas
    });

    const fontLoader = new FontLoader();
    fontLoader.load('/helvetiker_regular.typeface.json', font => {
      const textGeo = new TextGeometry(
        'Hello',
        {
          font,
          size: 1,
          height: 1
        }
      );
      const mesh = new Mesh(textGeo, material);
      scene.add(mesh);
      renderer.render(scene, camera);
    });

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400px"
        height="300px"
      />
    );
  }
}

export default Index;